<template>
  <div id="app">

    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <el-menu-item index="1" ><a @click="routerShop">门店管理</a></el-menu-item>
      <el-menu-item index="2" >商品管理</el-menu-item>
      <el-menu-item index="3"><a @click="routerOrder">订单管理</a></el-menu-item>
      <el-menu-item index="4"><a @click="logOut">退出登录</a></el-menu-item>
    </el-menu>

    <!--        未上架商品-->
    <div class="foot-header">
      <el-table size="big" current-row-key="id" :data="shopItem" stripe>

        <el-table-column prop="name" label="商品名称" ></el-table-column>
        <el-table-column prop="description" label="商品描述" ></el-table-column>
        <el-table-column prop="price" label="商品价格" ></el-table-column>

        <el-table-column label="操作" align="center">

          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="upItem(scope.row)">上架</el-button>
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style='position: relative;'>
      <el-row >
        <!--        <a class="add-first">-->
        <!--          <el-button  align="right" type="warning"-->
        <!--                      style='position: relative;left:79%;top:50%;' plain  >上架商品</el-button>-->
        <!--        </a>-->
        <a class="add-second">
          <el-button icon="el-icon-circle-plus" type="primary"  plain @click="handleCreate()">新建商品</el-button>
        </a>

        <!--        已上架商品-->
        <div class="foot-header">
          <el-table size="big" current-row-key="id" :data="itemList" stripe>

            <el-table-column prop="name" label="商品名称" ></el-table-column>
            <el-table-column prop="description" label="商品描述" ></el-table-column>
            <el-table-column prop="price" label="商品价格" ></el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="warning" size="mini" @click="downItem(scope.row)">下架</el-button>
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>



      </el-row>
    </div>

    <!-- 新增标签弹层 -->
    <div class="add-form">
      <el-dialog title="新增商品" :visible.sync="addFormVisible">
        <el-form ref="dataAddForm" :model="itemData"  label-position="right" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品名称:">
                <el-input v-model="itemData.name" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品描述:">
                <el-input v-model="itemData.description" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品价格">
                <el-input v-model="itemData.price" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAdd()">确定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 编辑标签弹层 -->
    <div class="add-form">
      <el-dialog title="编辑商品" :visible.sync="editFormVisible">
        <el-form ref="dataEditForm" :model="formData"  label-position="right" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="商品名称">
                <el-input v-model="formData.name" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="商品描述">
                <el-input v-model="formData.description" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="商品价格">
                <el-input v-model="formData.price" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEdit()">确定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
function GetQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}
export default {
  name: "ManageItem",
  el: '#app',
  data() {
    return {
      activeIndex: '2',
      shopId : 0,
      userId : 0,
      itemList: [],//已上架商品
      shopItem: [],//未上架商品
      formData: {},//表单数据
      itemData: {
        name:'',
        description:'',
        price:'',
        shopid:'',
        bid:''
      },
      addFormVisible: false,//增加表单是否可见
      editFormVisible: false,//编辑表单是否可见
    }
  },
  created() {
    var pareName = "shopId";
    this.shopId = GetQueryString(pareName);
    this.findItem(this.shopId);
    this.findShopItem(this.shopId);
    this.getUser();
  },
  methods: {
    //查询
    findItem(shopId) {
      this.$http({
        method : "GET",
        url : 'http://localhost:84/item/query/'+shopId
      }).then((res)=>{
        this.itemList = res.data.data;
      },(err)=>{
        if (err.response.status==403)
        {
          this.$message("未通过认证，请先登录或被授予权限");
        }
        else {
          console.log('err',err);
        }
      })
    },

    getUser() {
      this.$http({
        url: 'http://localhost:84/user/get',
      }).then((res)=>{
        this.userId = res.data;
        this.itemData.bid = res.data;
      },(err)=>{
        console.log('err',err);
      });
    },

    findShopItem(shopId) {
      this.$http({
        method : "GET",
        url : 'http://localhost:84/item/query/shopItem/'+shopId
      }).then((res)=>{
        this.shopItem = res.data.data;
      },(err)=>{
        console.log(err);
      })
    },

    // 重置表单
    resetForm() {
      this.formData = {};
      this.itemData = {};
    },

    // 弹出添加窗口
    handleCreate() {
      this.resetForm();
      this.addFormVisible = true;
    },

    //添加
    handleAdd() {
      this.itemData.shopid=this.shopId;
      this.$http.post("http://localhost:84/item/create", this.itemData).then((response) => {
        //隐藏新增窗口
        this.addFormVisible = false;
        if (response.data.flag) {
          this.$message({
            message: response.data.message,
            type: 'success'
          });
        } else {
          this.$message.error(response.data.message);
        }
      }).finally(() => {
        // 添加成功/失败后调出查询结果
        this.findShopItem(this.shopId);
      });
    },

    // 弹出编辑窗口
    handleUpdate(row) {
      this.$http.get("http://localhost:84/item/getById/" + row.id).then((res) => {
        if (!res.data.flag) {
          this.$message.error(res.data.message)
        } else {
          this.editFormVisible = true;
          this.formData = res.data.data;
        }
      })
    },

    //编辑
    handleEdit() {
      this.$http.post("http://localhost:84/item/update", this.formData).then((response) => {
        this.editFormVisible = false;
        if (response.data.flag) {
          this.$message.success(response.data.message);
        } else {
          this.$message.error(response.data.message)
        }
      }).finally(() => {
        this.findItem(this.shopId);
        this.findShopItem(this.shopId);
      });
    },

    // 删除
    handleDelete(row) {
      this.$confirm("确认删除该商品？", "提示", {type: 'warning'}).then(() => {
        this.$http.get("http://localhost:84/item/delete/" + row.id).then((res) => {
          if (!res.data.flag) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success(res.data.message)
          }
          this.findItem(this.shopId);
          this.findShopItem(this.shopId);
        })
      });
    },

    upItem(row){
      this.$http.get("http://localhost:84/item/up/"+row.id).then((res)=>{
        if (!res.data.flag) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success(res.data.message)
        }
      }).finally(() => {
        this.findItem(this.shopId);
        this.findShopItem(this.shopId);
      });
    },
    downItem(row){
      this.$http.get("http://localhost:84/item/down/"+row.id).then((res)=>{
        if (!res.data.flag) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success(res.data.message)
        }
      }).finally(() => {
        this.findItem(this.shopId);
        this.findShopItem(this.shopId);
      });
    },

    logOut(){
      this.$confirm("确认退出登录？", "提示", {type: 'warning'}).then(() => {
        this.$http.get("http://localhost:84/user/logout").then((res) => {
          if (!res.data.flag) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success(res.data.message)
          }
          sessionStorage.removeItem('token');
          this.$router.push({name:'UserLogin'});
        })
      });
    },

    routerShop(){
      this.$router.push({name:'ManageShop'})
    },
    routerOrder(){
      this.$router.push({name:'ManageOrder'})
    }

  }
}
</script>

<style scoped>

</style>